<template>
  <EChart
    class="display-date-chart"
    :option="option"
    v-if="option"
    height="500px"
  />
</template>

<script lang="ts">
import { DisplayAmountItem } from "model";
import { defineComponent, PropType } from "vue";
import EChart from "./EChart.vue";

export default defineComponent({
  name: "DisplayDateChart",
  props: {
    dataIn: {
      type: Object as PropType<Array<DisplayAmountItem>>,
      required: true,
    },
    dataOut: {
      type: Object as PropType<Array<DisplayAmountItem>>,
      required: true,
    },
  },
  components: {
    EChart,
  },
  setup(props) {
    const inD = [...props.dataIn].sort(
      (a, b) => parseInt(a.temp) - parseInt(b.temp)
    );
    const outD = [...props.dataOut].sort(
      (a, b) => parseInt(a.temp) - parseInt(b.temp)
    );
    const tempListIn = inD.map((item) => {
      return item.temp;
    });

    const tempListOut = outD.map((item) => {
      return item.temp;
    });

    let tempList = new Array(
      ...new Set([...tempListIn, ...tempListOut])
    ).sort();
    const valueListIn: Array<number> = [];
    const valueListOut: Array<number> = [];
    const inData = inD.map((item) => item.num);
    const outData = outD.map((item) => item.num);
    let indexIn = 0;
    let indexOut = 0;

    tempList.forEach((item) => {
      if (tempListIn[indexIn] == item) {
        valueListIn.push(inData[indexIn]);
        indexIn++;
      } else {
        valueListIn.push(0);
      }
      if (tempListOut[indexOut] == item) {
        valueListOut.push(outData[indexOut]);
        indexOut++;
      } else {
        valueListOut.push(0);
      }
    });

    tempList = tempList.map((item) => item + "°C");

    const option = {
      title: {
        text: "温度数据分布图",
        subtext: "设备数量决定数据数量",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["室内温度", "室外温度"],
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: tempList,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "室内温度",
          type: "bar",
          data: valueListIn,
          markPoint: {
            data: [{ type: "max", name: "最大值" }],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "室外温度",
          type: "bar",
          data: valueListOut,
          markPoint: {
            data: [{ type: "max", name: "最大值" }],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    };
    return {
      option,
    };
  },
});
</script>

<style scoped lang="scss"></style>
